<template>
    <el-dialog
        title="修改"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="600px"
    >
        <div v-if="reset" v-loading="loadingGet">
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item label="上级节点部门id：" prop="parentId" label-width="100px">
                    <el-input v-model="formData.parentId"></el-input>
                </el-form-item>
                <el-form-item label="根节点部门id：" prop="rootId" label-width="100px">
                    <el-input v-model="formData.rootId"></el-input>
                </el-form-item>
                <el-form-item label="部门名称(全称)：" prop="name" label-width="100px">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="名称简称：" prop="abbreviation" label-width="100px">
                    <el-input v-model="formData.abbreviation"></el-input>
                </el-form-item>
                <el-form-item label="组织后缀：" prop="suffix" label-width="100px">
                    <el-input v-model="formData.suffix"></el-input>
                </el-form-item>
                <el-form-item label="部门类型
1：区域
2：单位
3：乡镇街道
4：分类
5：村、社区
6：部门/科室
7：下属单位
8：虚拟组织
9：网格单元：" prop="type" label-width="100px">
                    <el-input v-model="formData.type"></el-input>
                </el-form-item>
                <el-form-item label="行政级别
3：省级
4：市级
5：县级
6：乡镇街道
7：村、社区
8：网格：" prop="clazz" label-width="100px">
                    <el-input v-model="formData.clazz"></el-input>
                </el-form-item>
                <el-form-item label="部门唯一code：" prop="code" label-width="100px">
                    <el-input v-model="formData.code"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码：" prop="uniscid" label-width="100px">
                    <el-input v-model="formData.uniscid"></el-input>
                </el-form-item>
                <el-form-item label="状态 1-正常 2-废弃：" prop="state" label-width="100px">
                    <el-input v-model="formData.state"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort" label-width="100px">
                    <el-input v-model="formData.sort"></el-input>
                </el-form-item>
                <el-form-item label="层级：" prop="level" label-width="100px">
                    <el-input v-model="formData.level"></el-input>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime" label-width="100px">
                    <el-date-picker
                        type="datetime"
                        placeholder="选择时间"
                        v-model="formData.createTime"
                        style="width: 100%;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="更新时间：" prop="updateTime" label-width="100px">
                    <el-date-picker
                        type="datetime"
                        placeholder="选择时间"
                        v-model="formData.updateTime"
                        style="width: 100%;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import dept_api from '../../api/dept_api'

export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        id: Number,
    },
    data() {
        return {
            reset: true,
            loadingGet: false,
            loadingSubmit: false,
            formData: {},
            rules: {
                parentId: [
                    { required: true, message: '请输入上级节点部门id', trigger: 'blur' }
                ],
                rootId: [
                    { required: true, message: '请输入根节点部门id', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入部门名称(全称)', trigger: 'blur' }
                ],
                abbreviation: [
                    { required: true, message: '请输入名称简称', trigger: 'blur' }
                ],
                suffix: [
                    { required: true, message: '请输入组织后缀', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请输入部门类型', trigger: 'blur' }
                ],
                clazz: [
                    { required: true, message: '请输入行政级别', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入部门唯一code', trigger: 'blur' }
                ],
                uniscid: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请输入状态 1-正常 2-废弃', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ],
                level: [
                    { required: true, message: '请输入层级', trigger: 'blur' }
                ],
                createTime: [
                    { required: true, message: '请输入创建时间', trigger: 'blur' }
                ],
                updateTime: [
                    { required: true, message: '请输入更新时间', trigger: 'blur' }
                ],
            },
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    created() {
    },
    methods: {
        init() {
            this.loadingGet = true
            dept_api.get(this.id).then(data => {
                this.loadingGet = false
                this.formData = data
            }).catch(err => {
                this.loadingGet = false
                this.$message.error(err.message)
            })
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    dept_api.update(this.formData).then(data => {
                        this.loadingSubmit = false
                        this.$message.success('修改成功!')
                        this.success()
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        }
    }
}
</script>

<style scoped>
</style>
